/**
 * Created by Administrator on 2016/7/7 0007.
 */
import React from 'react';
import $ from 'webpack-zepto';
require('./modal.css');

function Modal() {

    this.modal = function (setting) {
        var modalSetting = setting;

        $('<div>',{
            class : 'modal',
            html : buildContent()
        }).appendTo('body');

        btnClose();
        centerBtnCallback();
        firstBtnCallback();
        secondBtnCallback();

        function btnClose () {
            $('.modal-close').off().on('click',function () {
                $('.modal').remove();
            });

        };

        function centerBtnCallback() {
            var centerBtn = modalSetting.centerBtn;
            if(!centerBtn){
                return;
            }
            var centerCallback = centerBtn.isCallback;
            $('.center-btn').off().on('click',function () {
                if(centerCallback){
                    centerCallback.call();
                }else {
                    $('.modal').remove();
                }
            });

        };

        function firstBtnCallback() {
            var firstBtn = modalSetting.firstBtn;
            if(!firstBtn){
                return;
            }
            var firstCallback = firstBtn.isCallback;
            $('.first-btn').off().on('click',function () {
                if(firstCallback){
                    firstCallback.call();
                }else {
                    $('.modal').remove();
                }
            });
        };

        function secondBtnCallback() {
            var secondBtn = modalSetting.secondBtn;
            if(!secondBtn){
                return;
            }
            var secondCallback = secondBtn.isCallback;
            $('.second-btn').off().on('click',function () {
                if(secondCallback){
                    secondCallback.call();
                }else {
                    $('.modal').remove();
                }
            });
        };
        
        function buildContent () {
            var html = '<div class="modal-content">';
            html += header();
            html += body();
            html += footer();
            html += closeIcon();
            html += '</div>';
            return html;
        };

        function header () {
            var headerHtml = '<div class="modal-header">';
            headerHtml += '<img class="header-icon" src="' + (modalSetting.isSuccess ?  'images/success.png' : 'images/failed.png') + '" />';
            if(modalSetting.header){
                headerHtml += '<span class="modal-title">' + modalSetting.header + '</span>';
            }
            headerHtml += '</div>';
            return headerHtml;
        };

        function body () {
            var body = '',bodyClass = '';
            if(modalSetting.lowerBody){
                bodyClass ='lower-body';
            }
            body += '<div class="modal-body ' + bodyClass + '">';
            if(modalSetting.body){
                body += modalSetting.body;
            }
            body += '</div>';

            return body;
        };

        function footer () {
            var footer = '<div class="modal-footer">';
                footer += '<div class="footer-btn-group">';
            if(modalSetting.centerBtn){
                footer += '<div class="center-btn">' + modalSetting.centerBtn.text + '</div>';
            }
            if(modalSetting.firstBtn){
                footer += '<div class="first-btn">' + modalSetting.firstBtn.text + '</div>';
            }
            if(modalSetting.secondBtn){
                footer += '<div class="second-btn">' + modalSetting.secondBtn.text + '</div>';
            }
                footer += '</div>';
                footer += '</div>';
            return footer;
        };

        function closeIcon () {
            var closeIcon = true;
            var html = '';
            if(false == modalSetting.closeIcon){
                closeIcon = false;
            }
            if(closeIcon){
                html += '<img class="modal-close" src="images/close.png" alt="关闭"/>';
            }
            return html;
        };

    };

    this.close = function () {
        $('.modal').remove();
    };
}

module.exports = new Modal();

// setting = {
//     isSuccess : true,
//     header : '付款成功!',
//     body : '您已经支付成功！',
//     centerBtn : {
//         isExist : true,
//         isCallback : function(){
//             scope.centerCallback()
//         }
//     },
//     firstBtn : {
//         text : '返回首页',
//         isCallback : false
//     },
//     secondBtn : {
//         text : '重新支付',
//         isCallback : false
//     },
//
//     lowerBody : false
// }